<template>
  <div class="heard">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="关于我们" name="1"></el-tab-pane>
      <!-- <el-tab-pane label="选择9001四大理由" name="2"></el-tab-pane> -->
    </el-tabs>
    <div v-if="activeName == '2'">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="title"
          label="标题"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="操作"
          min-width="230"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-card> -->
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    </div>
    <!-- 关于我们 -->
    <div v-else>
      <el-form>
        <el-form-item label="关于我们">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6}"
            placeholder="请输入内容"
            v-model="aboutForm.context"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center">
        <el-button @click="saveAU" type="warning" >保存</el-button>
      </div>
    </div>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="60px" :model="form">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="form.context"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getList00 ,edit} from '@/api/web/about'
export default {
  data(){
    return{
      //数据
      tableData: [],
      // 关于我们
      aboutForm:{
        context:'',
        contextType:'',
        id:'',
        sort:''
      },
      // 加载
      loading:false,
      params: {
        pageNum: 1,
        pageSize: 10,
        contextType:8
      },
      pageTotal: 0,
      // 标签栏 
      activeName:'1',
      // 编辑弹窗
      dialogFormVisible:false,
      form:{
        context:'',
        contextType:'',
        id:'',
        sort:''
      }
    }
  },
  created() {
    this.getList()
  },
  methods:{
    // 选择
    handleClick(tab, event) {
      if(tab.name == '1'){
        this.getList()
      }else {
        this.getData00()
      }
    },
    // 打开编辑弹窗
    handleEdit(row) {
      this.form = row
      this.dialogFormVisible = true
    },
    // 编辑
    save() {
      edit(this.form).then(res => {
        if(res.code == 200){
          this.$message.success('保存成功')
          this.dialogFormVisible = false
          this.getData00()
        }
      })
    },
    // 编辑关于我们
    saveAU() {
      edit(this.aboutForm).then(res => {
        if(res.code == 200){
          this.$message.success('保存成功')
          this.getList()
        }
      })
    },
    // 关于我们
    getList() {
      this.loading = false
      let data = {
        contextType:7
      }
      getList00(data).then(res => {
        if(res.code == 200){
          if(res.rows[0]){
            this.aboutForm = res.rows[0]
          }
        }
      })
    },
    // 四大理由
    getData00(){
      this.loading = true
      getList00(this.params).then(res => {
        if(res.code == 200){
          this.tableData = res.rows
          this.pageTotal = res.total
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
  .heard{
    padding:20px 20px 20px 40px;
  }
</style>
